<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Using Lisk-JS</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/experiment.css">
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="../index.html"><span><img width="25" height="25" src="lisk.png" alt="Lisk" /></span> lisk-js</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../index.html">HOME</a></li>
                <li><a href="api.html">API</a></li>
                <li class="active"><a href="experiment.html">EXPERIMENT</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

<div class="container">
    <div class="starter-template">
        <div class="col-sm-2">
            <ul id="sidebar" class="nav nav-stacked affix">
                <li><a href="#introduction" class="pageLink" data-id="introduction">Introduction</a></li>
                <li><a href="#get_account" class="pageLink" data-id="get_account">Get Account Info</a></li>
                <li><a href="#send_lsk" class="pageLink" data-id="send_lsk">Send LSK</a></li>
                <li><a href="#sign" class="pageLink" data-id="sign">Sign Message</a></li>
                <li><a href="#verify" class="pageLink" data-id="verify">Verify Message</a></li>
                <li><a href="#encrypt" class="pageLink" data-id="verify">Encrypt Message</a></li>
                <li><a href="#decrypt" class="pageLink" data-id="verify">Decrypt Message</a></li>
            </ul>
        </div>
        <div class="col-sm-10">
            <div class="row pageX" id="introduction">
                <h2>Introduction</h2>

                <p>Lisk-js provides full access to the core API and cryptographic functionality of Lisk.</p>
                <p>The purpose of this page is to demonstrate a small part of the functionality Lisk-js can provide.</p>
                <p>Any transactions sent from this page are broadcast to <a href="https://testnet-explorer.lisk.io/">the official Lisk testnet</a>, therefore no real LSK can be sent.</p>
                <p>Create a test account at <a href="https://testnet.lisk.io">the official Lisk testnet login</a></p>
            </div>
            <div class="row pageX" id="get_account">
                <h2>Get Account Info</h2>

                <form class="experimentForm">
                    <div class="form-group">
                        <label for="info_secret_input">Passphrase</label>
                        <input type="password" class="form-control" id="info_secret_input" placeholder="yourSecret">
                    </div>
                    <input class="showSecret" type="checkbox" data-toggle="toggle" style="width: 200px;" id="info_show_secret" data-on="HIDE" data-off="SHOW">
                    <input type="submit" id="usePassphrase" class="btn btn-primary" value="Get account">
                </form>

                <div class="row">
                    <div class="col-md-4">
                        <h3>Balance</h3>
                        <div id="balance_details" style="word-wrap: break-word"></div>
                    </div>
                    <div class="col-md-4">
                        <h3>Transactions</h3>
                        <div id="transaction_details" style="word-wrap: break-word; max-height:250px; overflow-y:scroll;"></div>
                    </div>
                    <div class="col-md-4">
                        <h3>Delegate Info</h3>
                        <div id="delegate_details" style="word-wrap: break-word"></div>
                    </div>
                </div>
            </div>
            <div class="row pageX" id="send_lsk">
                <div class="row">
                    <div class="col-md-12">
                        <h2>Send LSK</h2>

                        <p>Any transactions sent from this page are broadcast to <a href="https://testnet-explorer.lisk.io/">the official Lisk testnet</a>, therefore no real LSK can be sent.</p>

                        <form class="experimentForm">
                            <div class="form-group">
                                <label for="send_secret_input">Passphrase</label>
                                <input type="password" class="form-control" id="send_secret_input" placeholder="yourSecret">
                            </div>
                            <input type="checkbox" data-toggle="toggle" id="send_show_secret" data-on="HIDE" data-off="SHOW">
                        </form>

                        <br>

                        <form>
                            <div class="form-group">
                                <label for="send_lsk_recipient">Recipient</label>
                                <input type="text" class="form-control" id="send_lsk_recipient" placeholder="123...L">
                            </div>
                            <div class="form-group">
                                <label for="send_lsk_input">Amount</label>
                                <input type="number" class="form-control" id="send_lsk_input" placeholder="Amount to send">
                            </div>
                            <input type="submit" id="sendLsk" class="btn btn-primary" value="Send">
                        </form>

                        <br>
                        <div id="output_send"></div>
                    </div>
                </div>
            </div>
            <div class="row pageX" id="sign">
                <h2>Sign Message</h2>

                <form class="experimentForm">
                    <div class="form-group">
                        <label for="signPassphrase">Passphrase</label>
                        <input type="password" class="form-control" id="signPassphrase">
                    </div>
                    <div class="form-group">
                        <label for="signMessage">Message</label>
                        <textarea class="form-control" id="signMessage" rows="5"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary" id="submitSignMessage">Sign</button>

                    <div class="form-group">
                        <br>
                        <label for="verifyResult">Result</label>
                        <textarea class="form-control" id="signResult" rows="5"></textarea>
                    </div>
                </form>
            </div>
            <div class="row pageX" id="verify">
                <h2>Verify Message</h2>

                <form class="experimentForm">
                    <div class="form-group">
                        <label for="verifyPublicKey">PublicKey</label>
                        <input type="text" class="form-control" id="verifyPublicKey">
                    </div>
                    <div class="form-group">
                        <label for="verifySignature">Signature</label>
                        <input type="text" class="form-control" id="verifySignature">
                    </div>
                    <button type="submit" class="btn btn-primary" id="verifySignedMessage">Verify</button>

                    <div class="form-group">
                        <br>
                        <label for="verifyResult">Result</label>
                        <p id="validSignature" style="color: red;"></p>
                        <textarea class="form-control" id="verifyResult" rows="5"></textarea>
                    </div>
                </form>
            </div>

            <div class="row pageX" id="encrypt">
                <h2>Encrypt Message</h2>

                <form class="experimentForm">
                    <div class="form-group">
                        <label for="encryptMessageSecret">Secret</label>
                        <input type="text" class="form-control" id="encryptMessageSecret">
                    </div>
                    <div class="form-group">
                        <label for="encryptMessageRecipientPublicKey">Recipient PublicKey</label>
                        <input type="text" class="form-control" id="encryptMessageRecipientPublicKey">
                    </div>
                    <div class="form-group">
                        <label for="encryptMessage">Message</label>
                        <textarea class="form-control" id="encryptMessage" rows="5"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary" id="submitMessageToEncrypt">Sign</button>

                    <div class="form-group">
                        <br>
                        <label for="verifyResult">Encrypted Message</label>
                        <textarea class="form-control" id="encryptedMessage" rows="4"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="verifyResult">Nonce for encrypted Message</label>
                        <textarea class="form-control" id="encryptedMessageNonce" rows="1"></textarea>
                    </div>
                </form>
            </div>

            <div class="row pageX" id="decrypt">
                <h2>Decrypt Message</h2>

                <form class="experimentForm">
                    <div class="form-group">
                        <label for="decryptMessageSecret">Secret</label>
                        <input type="text" class="form-control" id="decryptMessageSecret">
                    </div>
                    <div class="form-group">
                        <label for="encryptedMessageToDecrypt">Encrypted Message</label>
                        <input type="text" class="form-control" id="encryptedMessageToDecrypt">
                    </div>
                    <div class="form-group">
                        <label for="nonceToDecrypt">Nonce</label>
                        <input type="text" class="form-control" id="nonceToDecrypt">
                    </div>
                    <div class="form-group">
                        <label for="senderPublicKey">Sender PublicKey</label>
                        <input type="text" class="form-control" id="senderPublicKey">
                    </div>

                    <button type="submit" class="btn btn-primary" id="decryptMessage">Decrypt</button>

                    <div class="form-group">
                        <br>
                        <label for="verifyResult">Result</label>
                        <p id="decryptedMessageValidity" style="color: red;"></p>
                        <textarea class="form-control" id="decryptedMessage" rows="5"></textarea>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://gitcdn.xyz/repo/LiskHQ/lisk-js/development/dist/lisk-js.js"></script>
<script src="js/liskjs-example.js"></script>

<script>
'use strict';

$(document).ready(function () {
    routeAction();
});

$('.pageLink').on('click', function () {
    setTimeout(function() {
        routeAction();
    }, 100);

    $('#secretInput').val('');
});

function routeAction () {
    $('.pageX').hide();
    $('.experimentForm').trigger('reset');

    if (window.location.hash) {
        // Fragment exists
        var hash = window.location.hash;
        $(hash).show();
    } else {
        $('.pageX').hide();
        $('#introduction').show();
    }
}
</script>

</body>
</html>
